<template>
  <view>
    <view class="leo-list">
      <view>
        <view
          class="uni-flex uni-row leo-align-items-center leo-space-between leo-list-item "
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="uni-flex uni-row leo-align-items-center">
            <view class="">
              <view
                class=" text-line-height-1 text-16  pingfangbold  leo-ellipsis-1   u-type-primary"
              >
                <span>
                  {{ item.name }}
                </span>
                <view class="childstyle">
                  <view
                    class="children-for"
                    v-for="(i, index1) in item.list"
                    :key="index1"
                    @click="toExercise(i)"
                  >
                    <view class="children-content">
                      <view>{{ i.title }}</view>
                      <view class="timeStyle">
                        <view>{{ i | customFilter }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
import { formatter } from "@/utils/date"
export default {
  data() {
    return {
      list: [],
      courseId: "",
      pageNum: 1,
      total: 0,
      pages: 0,
      status: "",
    };
  },
  async onLoad(e) {
    this.courseId = e.courseId;
    await this.initial();
  },
  async onPullDownRefresh() {
    await this.initial();
  },
   async onReachBottom() {
    this.status = 'loading';
    this.pageNum = this.pageNum + 1
    if (this.pageNum < this.pages) {
      await this.getList();
      this.status = 'loadmore';
    } else {
      this.pageNum = this.pageNum - 1;
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }
  },
  methods: {
    async initial() {
      this.pageNum = 1;
      this.total = 0;
      const res = await this.getList()
      this.total = res.total;
      this.pages = res.pages;
      this.list = res.data;
      uni.stopPullDownRefresh();
    },
    async getList() {
      return await this.$u.api.getStuExerciseTask(this.courseId, {
        pageNum: this.pageNum,
      });
    },
    toExercise(item) {
      let begin = new Date(item.beginTime).getTime();
      let now = new Date().getTime();
      let end = new Date(item.endTime).getTime();
      if (begin > now) {
        this.$u.toast("未开始，请等待！");
        return;
      }
      // 未作答跳转到作答页面
      if (item.fraction === null) {
        uni.setStorage({
          key: item.id + "time",
          data: item.duration * 60,
          success: (res) => {
            this.$u.route({
              url: "pages/exercise/exercise",
              params: {
                id: item.id,
              },
            });
          },
          fail: () => {
            this.$u.toast("出错请重试！");
          },
        });
        return;
      }

      if (now > end || item.fraction != null) {
        this.$u.route({
          url: "pages/exercise_answer/exercise_answer",
          params: {
            id: item.id,
          },
        });
      }
    },
  },
  filters: {
    customFilter(item) {
      return item.fraction == null
        ? "开始时间：" + formatter(item.beginTime)
        : "分数为：" + item.fraction;
    },
  },
};
</script>

<style lang="scss">
.leo-list {
  margin: 15rpx 20rpx;
  background: #ffffff;
  .leo-list-item {
    padding: 18px 12px;
    margin-bottom: 20px;
    box-shadow: -2px 0px 16px 6px rgba(163, 163, 163, 0.15);
  }
}
.uni-flex {
  display: flex;
  flex-direction: row;
}

.uni-flex-item {
  flex: 1;
}

.uni-row {
  flex-direction: row;
}

.uni-column {
  flex-direction: column;
}

.leo-align-items-center {
  align-items: center;
}

.leo-space-between {
  // justify-content: space-between;
}

.text-line-height-1 {
  line-height: 1 !important;
}

.text-12 {
  font-size: 25rpx !important;
}
.text-16 {
  font-size: 30rpx;
}
.leo-ellipsis-1 {
  display: flex;
  flex-direction: column;
  color: #000;
  font-style: 18px;
  font-weight: bold;
  .childstyle {
    padding: 0px 10px 0px 16px;
    .children-for {
      display: flex;
      margin-bottom: 60rpx;
      .children-content {
        color: rgb(40, 40, 40);
        font-style: 16px;
        font-weight: 400;
        /* 强制一行内显示文本 */
        white-space: nowrap;
        /* 超出的部分隐藏 */
        overflow: hidden;
        /* 文字用省略号替代超出部分 */
        text-overflow: ellipsis;
        .timeStyle {
          display: flex;
          margin-top: 6px;
          color: rgba(156, 164, 169, 1);
          font-weight: bold;
          font-size: 12px;
        }
      }
    }
    .children-for:first-child {
      margin-top: 20px;
    }
  }
}
</style>
